<!DOCTYPE html>
<html lang="en">
    <head>

        <!--	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
                <script src="../../jquery-1.7.2.js"></script>
                <script src="../../ui/jquery.ui.core.js"></script>
                <script src="../../ui/jquery.ui.widget.js"></script>
                <script src="../../ui/jquery.ui.position.js"></script>
                <script src="../../ui/jquery.ui.autocomplete.js"></script>
                <link rel="stylesheet" href="../demos.css">-->
                
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        
        <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
        <link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
        
        <style>
            #project-label {
                display: block;
                font-weight: bold;
                margin-bottom: 1em;
            }
            #project-icon {
                float: left;
                height: 32px;
                width: 32px;
            }
            #project-description {
                margin: 0;
                padding: 0;
            }
        </style>
        <script>
            $(function() {
                var projects = [
                    {
                        value: "jquery",
                        label: "jQuery",
                        desc: "the write less, do more, JavaScript library",
                        icon: "jquery_32x32.png"
                    },
                    {
                        value: "jquery-ui",
                        label: "jQuery UI",
                        desc: "the official user interface library for jQuery",
                        icon: "jqueryui_32x32.png"
                    },
                    {
                        value: "sizzlejs",
                        label: "Sizzle JS",
                        desc: "a pure-JavaScript CSS selector engine",
                        icon: "sizzlejs_32x32.png"
                    }
                ];

                $( "#project" ).autocomplete({
                    minLength: 0,
                    source: projects,
                    focus: function( event, ui ) {
                        $( "#project" ).val( ui.item.label + ui.item.desc );
                        return false;
                    },
                    select: function( event, ui ) {
                        $( "#project" ).val( ui.item.label + ui.item.desc );
                        $( "#project-id" ).val( ui.item.value );
                        $( "#project-description" ).html( ui.item.desc );
                        $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

                        return false;
                    }
                })
                .data( "autocomplete" )._renderItem = function( ul, item ) {
                    return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
                    .appendTo( ul );
                };
            });
        </script>
    </head>
    <body>

        <div class="demo">
            <div id="project-label">Select a project (type "j" for a start):</div>
            <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default"/>
            <input id="project"/>
            <input type="hidden" id="project-id"/>
            <p id="project-description"></p>
        </div><!-- End demo -->



        <div class="demo-description">
            <p>You sf.</p>
            <p>Tsdf</p>
        </div><!-- End demo-description -->

    </body>
</html>
